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Introduction 


The continuous and rapid development in the field of information and 
communication technology imposes requirements for sophisticated methods of the 
educational process to keep up with the successive technological developments. 

It is what led us to adopt new instructional entrances designed to achieve the 
goals, philosophy and visions contained in the document of computer and information 
technology that reflects the criteria and indicators for the subject for second year 
secondary that had been prepared in the framework of a matrix of the long relay at 
various stages of study. 

The curriculum is designed to develop self-mail and collaborative thinking skills 
and different types of students through cooperation in the implementation of projects 
to design and create interactive Web site "Illustrated dictionary terms." 

The idea of the project depends on the creation of a model program whose pages 
are designed by using (Expression Web), and the language of HTML coding, This 
project includes databases created by using MySQL program. 

We deal with databases through templates that were written in PHP programming 
language. They are open Source; you can copy and use them in the establishment of 
the site pages and understanding and the developing of any code you want to 
implement. 

The book also includes pictures of the actual application interfaces executing the 
project, to clarify all the action steps, and simplify the concepts of learners, through 


activities and exercises comprising its operation in the dedicated book. 


Finally, this book is keen to develop various thinking skills and life skills for using 
ICT through carrying out projects that give students opportunities to employ what 


they are studying in their working lives. 
(God bless) 


Staff 
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Unit 1 


Basics of Web Site Design 
By the end of the unit, it is expected that the 
student will be able to: 
1- Show some advanced scientific concepts and terms 
related to the computer. 
2- Employ computer programs in the implementation of 
learning tasks. 
3- Employ network of Internet services in the teaching 
and learning processes. 
4- Practice searches for all forms of electronic information 
on the computers and networks reliable in solving the 


problem of information. 
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Title: Basic Concepts 


We studied some important concepts and the terminology. 
necessary to deal with the database through a Web page and 
handling some of its contents. 


Required: 


Choose the appropriate answer to complete the following 
statements: 


(1) Software that are free for all users: 
a. Free Ware. 
b. Open Source. 
c. Copy Write. 
(2) Programs that are published and allows users to see their 
own code and modify it are called: 
a. Free Ware. 
b. Open Source. 
c. Copy Write. 


(3) A Web page that shows only some of the information and 
shows the title moving from right to left and sound effects on 
your Internet browser program is considered: 

a. Dynamic web Page. 

b. Static web Page. 

c. Home page. 
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(4) Web page through which data can be displayed, and es 


allows the user to modify and save the modified data in the 
database, is called: 

a. Static web page. 

b. Dynamic web page. 

c. Home Page. 


(5) The User Script code used to process some of the data on 
a web page is executed in: 
a. A server device on which the site was stored only. 
b. Internet browser only. 
c. All the above. 


(6) The Script code is written in many languages, one of the 
most famous: 
a. CH. 
b. HTML. 
c. PHP. 
(7) The web page that requires you to enter your user name 
and password, means: 
a. It is not made to handle their data. 
b. Static web page. 
c. Deal with the database. 
(8) Theterm Server refers to the computer: 
a. With the highest technical specifications from the rest of the 
network devices. 
b. Larger network. 
c. connected to the Internet 
(9) Theterm Server can refer to: 
a. A computer device at least in the technical specifications. 
b. The role of the computer in the computer network. 
c. Computer with the Director General. 
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(10) PC in which we store a Web site, is called: 
a. Database Server 
b. Mail Server. 
c. Web Server. 
(11) PC that stores the e-mail of a company is called: 
a. Database Server 
b. Mail Server. 
c. Web Server. 
(12) HTML markup language is used to create: 
a. Dynamic Web Page . 
b. Static Web Page. 
c. PHP Page. 
(13) Web pages with PHP extension refer to the execution of 
the PHP code: 
a. Internet browser. 
b. Client machine. 
C. Server device. 
(14) The term Publishing web Site means: 
a. Website published on the Internet. 
b. Publish a site on a computer in the pages LAN computer network. 
c. publish a website or pages on a computer in a network 
(15) One of the companies created their own site to manage 
its business and published it for all employees only, this site 
will be considered: 
a. Local Host. 
b. Hosting Web Site . 


c. Host. 
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(16) The following address is for a private company: 
http://www.company.com/index.html, from the reading the 
title we notice that this site has been published: 

a. Local Host . 

b. Publishing web Site. 

c. Locally and on the Internet. 
(17) There are many free programs related to database 
management systems that has relationships: 

a. MySQL. 

b. SQL. 

c. Access. 
(18) The language used in dealing with data from add, delete 
and edit are: 

a. SQL. 

b. HTML. 

c. Java script. 
(19) One of the modalities for the transfer of data from a Web 
page to another, and allows the developer of the site for the 
user to visit the site of some or all of the pages, is called: 

a. Password. 

b. User Name. 


C. Session. 
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Activity (1) 


program and install it . : 


Under the supervision of your teacher, follow the following 

steps to install the software: 

e Use the program keywords related to installing the program to 
search through the Internet search engines. 


e Discuss what you reached with your classmates and your teacher. 
e Press D-Click on xampp-win32-5.6.3-0-VC11-installer.exe file. 


After seeing the following screen: 


BitNami 


e follow the installation wizard through the following screens: 
After displaying "welcome screen", press the "Next" button 


2 


O bitnami 
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e The 


° Study the 


screen in front 

"program components" that 
you want to select, discuss 
with your teacher and 
classmates these components 
and their uses, then select the 
components you choose. 


Advice ........ 
Choose them all specially 


Apache and MySQL. 


e Press "next". 


e From the screen of 
identifying the folder, select 
the folder in which the 
software is installed, then 
press the "Next" button. 


screen that 
appeared in front of you and 
discuss the content with your 
colleagues and your teacher, 
and | what it indicates? 
It confirms that the Free 
Software supports some of 
the open-source software 
with the ability to learn more 
about XAMPP program. 


e Press " next" 


Second year secondary 


of | you 


Select Components 


determine 


Apache 
MySQL 


Tomcat 


phpMyAdmin 
Webalizer 
Fake Sendmail 


SIS) F WIS) 3 ISIS) 9v 


Filezilla FTP Server 
Mercury Mail Server 


XAMPP Installer 


Installation folder 


Please, choose a. £s 


Cancel 


Select a Fold&& | C:\xamppl 


Bitnami for XAMPP 


XAMPP Installer 


Computer & Information and Communication Technology 


Bitnami For XAMPP provides free installers that can install 
Drupal, Joomla!, WordPress and many other popular open 
gurce apps on top of your existing XAMPP installation. 


Cancel 
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e When the screen of installing XAMPP program process 


appears, Wait until the end of the installation, and then press "Next" 


Welcome to XAMPP! [] 


XAMPP is an easy to install Apache distribution 
containing MySQL, PHP and Perl. 


button. 


BitNami for XAMPP 


BitNami for XAMPP provides free installers that can install 
Drupal, Joomla!, WordPress and many other popular open 
source apps on top of your existing XAMPP installation. 


qe Eme 


e When you see the last screen of 
installing the program, 
select to access control panel 
of the XAMPP program 


e Click "Finish" button. 


e When the control panel of XAMPP 
program appears, make sure to 
choose the Apache, then press the 
"Start" button below the "Actions 


Instaling 


Lon ] 


Module — PID(S) Portis) Actions @ Netstat 


ew BERE 80,43 | Stop Config rel 
680 336 | Stop || Aj Config Egone 
Sta Admin Config © Services 

Stat | Admin | Config 9 Help 

Start Admin | Config E Quit 


XAMPP Installation Directory: “c:\xampp\" 
Checking for prerequisites 
in] All prerequisites found 
| [main] Initializing Modules 
| [Apache] XAMPP Apache Service is already running on port 80 
| [Apache] XAMPP Apache Service is already running on port 443 
| [mysql] XAMPP MySQL Service is already running on port 3306 
| [main] Starting Check-Timer 
OPM [main] ^ Control Panel Ready 


e Repeat the previous step with MySQL. 
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How to make sure you installed 


(9) 


XAMPP program correctly? 


Discuss this with your classmates. 


e Load Internet browser software available on your computer. 
e Type in the address bar "Localhost", and press the "Enter" key. 


e Then you will see the next screen: 


O- [Eg http://localhost/xampp/ 
(=) XAM P P fo r Wi nd OWS rie cl Deutsch ; Francais ; Nederlands / Polski » Italiano ; 


orwegian ; Español ; +3 / Portugués (Brasil) ; 38 


Try out the new XAMPP welcome page ^ 


We are working on a new Welcome page for XAMPP and we need your help! You can you can see the current 
version at Dashboard. We are improving our current "FAQs" and adding new "How to" guides. We posted some 
suggestions for new guides at ApacheFriends forum. If you have any comments or suggestions for the new welcome 


page, please don't hesitate to post in the forum. Your feedback will help us improve XAMPP!. If you have any 
comments or suggestions for the new welcome page, please don't hesitate to post in the forum. Your feedback will 
Documentation help us improve XAMPP! 

Components 

Applications 


Php Welcome to XAMPP for Windows! 


phpinfo() Congratulations: 
CD Collection You have successfully installed XAMPP on this system! 
Biorhythm 
Instant Art Now you can start using Apache and Co. You should first try @Status@ on the left navigation to make sure 
Phone Book everything works fine. 


Perl For OpenSSL support please use the test certificate with https://127.0.0.1 or https://localhost 


» perlinfo() Good luck, Kay Vogelgesang + Kai 'Oswald' Seidler 
Guest Book 


ee Install applications on XAMPP using Bitnami 
Info Apache Friends and Bitnami are cooperating to make dozens of open source applications available on XAMPP, for 
Tomcat examples free. Bitnami-packaged applications include Wordpress, Drupal, Joomla! and dozens of others and can be deployed 
with one-click installers. visit the Bitnami XAMPP page for details on the currently available apps. 
Tools 


| phpMyAdmin 

Filezilla FTP fO] 
Webalizer 
Mail 


XAMPP Hosting 
2002 


FRIENDS... XAMPP provides an ideal local development environment, but is not meant for production deployments. We want to 
make hosting PHP applications created with XAMPP as easy as possible. Visit our Hosting page for reading our v 
documentation. 


After installing XAMPP program, your computer becomes a Server 


"local host" 
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This activity helps you to run XAMPP software that makes ` 
your computer act as a Server, and operate the Apache 


program and MySQL database management systems. 


Required: 
Run control panel of the XAMPP program and make sure you run 
programs Apache and MySQL. 


Executing the activity: 
Run the control panel of the XAMPP program by one of the 


following ways: 


Jo WinRAR 


ad ZAME 1. Start menu as follows. 


GJ Bitnami for XAMPP 
e Choose XAMPP Control Panel 


"X Uninstall XAMPP 
GJ XAMPP Control Panel 
jo) XAMPP htdocs folder 
P Xvid 
do Yahoo! Messenger 
Je YTD Video Downloader - 


4 Back 


e Through control panel of the program 
XAMPP ,do what is indicated: 


[E] XAMPP Control Panel v3.2.1 [ Compiled: May 7th 2013 ] EI 


XAMPP Control Panel v3.2.1 Config 
Modules PLES 
Service Module — PID(s) Ports) Actions M) tietstat.- 
Apache 1812 80.443 [ Stop | [ Admin | [Config | [ togs- GH Sheil 
MySQL —— 3436 3306 [ Stop. ] Explorer | | 
FileZilla | Stat anig || © Senices 
Mercury | Start Help 
= Sua Conta] | Click Start to run 
[main] XAMPP Installation Directory: "c xamppl" 
[main] Checking for prerequisites 
[main] All prerequisites found Apa che as well as 


[main] Initializing Modules 
[Apache] XAMPP Apache Service is already running on port 80 
[Apache] XAMPP Apache Service is already running on port 443 


the Start button 


[mysqi] XAMPP MySQL Service ts already running on port 3306 
[main] Starting Check-Timer 
[main] Control Panel Ready next to the MySQL 


appears on the 
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2. Also you can run XAMPP from XAMPP-control.exe file in the 
folder "C: V XAMPP", taking into account to be sure you install 
the software on your machine. 


Change the Apache port 


Sometimes the problem occurs when you click Start in 


front of Apache to run it and the window appears as 


follows: 
(El XAMPP Control Panel v3.2.1 [ Compiled: May 7th 2013] Si) 
XAMPP Control Panel v3.2.1 (CZ conta] 
ae Module PID(s) Port(s) Actions Adenia., 
Apache (Stat) | Admir | Config | | Logs | gii Shell 

MySQL Start Admit Config Logs |. Explorer 

FileZilla Start Admir Config Logs | © Services 
Mercury m ETE [mem 
Tomcat [Stat] | Ad Config Logs [ B Qui. | 
59:31 = [main] about running this application with administrator rights! á 


59:31 a [main] XAMPP Installation Directory: "c:\xampp\" 
= [main] Checking for prerequisites 
= [main] All prerequisites found 


p [main] Initializing Modules 
31.2 [Apache] Port 80 in use by "Unable to open process" with PID 4! 
= [Ap e AD e VV U WRTIQU e CO ured po ee = 


2:59:31 = [Apache] You need to uninstall/disable/reconfigure the blocking application 

2:59:31 =- [Apache] or reconfigure Apache and the Control Panel to listen on a different port 

2-59:31 = [main] Starting Check-Timer 

2:59:31 = [main] Control Panel Ready ES 


The line referred to illustrates the problem that the port 80 is 
busy by another application and this happens if you install 


more than one server on the operating system. 


This problem can be resolved by choosing another port for 


apache program by doing the following: 
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As in the following: 


1 -— 
lo | € immi] 
GU" J Cvxampp\apache\conf -| ++ || Search conf P 
File £dit View Tools Help 
Organize v [af Open X Burn New folder =» © 
S Name Date modified Type 
= 
^T Computer de extra Y-18/-1/1! us File folder 
4 È, Abdallah Mansour (C:) ae : 
Ji save & original + 10/+E/)) un File folde: 
ssl.crt T+10/+L/)) ye -EOY File folder 
Ge 75390073a585fdc4 e d82219f682 -~ i y.i F 
SshLcsr uu = ate Fil jer 
d AdwCleaner i 
de sshkey T-16/-£/1) yo Jer 
B. d99788696590607f1b64 vM à ONV F 
Bi Downloads | charset.conv MUS phe NV File 
nloa 
ns =) httpd.conf T+}0/+¥/+A ye )T:01 CONF File 
4& MSOCache < x = 
li Perflogs magic DE SIN a -1:9-4 File 
p Program Files | mime.types Tek a T. TYPES File 
|. openssl.cnf PILA) a Hen NF File 


di ProgramData 
de SWsetup 
d swroots 
ds Users 
^ jb Windows 
de xampp 
zx Local Disk (D:) 
em Removable Disk (G:) 


nm 


> €i Network 


Date created: Y-19/-£/1! ua -ESY 


httpd.conf Date modified: Y-18/-V/ «A ue 17:01 
l| core Size: 208 KB 


e You can also open httpd.conf file by clicking 
XAMPP Control Panel window as follows: 


| [E] XAMPP Control Panel v3.2.1 [ Compiled: May 7th 2013 ] 


| XAMPP Control Panel v3.2.1 


config button on a 


CEES) 
# Config 


Modules Netstat 
Service Module PID{s) Port(s) Actions |. netstat | 
— - r - zea 
Apache Stat ] Admin [Canal kons l | Mill Sheil ] 
Apache (httpd.conf) 
= Start Le Apache (httpd-ssl.conf) 
FileZilla Start ] f Cc Apache (httpd-xampp.conf) 
f (— PHP (php.ini) 
Mercury Start Cc 
| Stadt = phpMyAdmin (config.inc.php) 
Tomcat Start Admir lg 


<Browse> [Apache] 


2 1. [main] about running this application with administrator rights! «Browse» [PHP] 
2 22 [main] XAMPP Installation Directory: “c:\xampp\" <Browse> [phpMyAdmin] 
| o4 [main] Checking for prerequisites 
15» [main] All prerequisites found 
152^ [main] Initializing Modules 
15» [Apache] Problem detected! 
1 42 [Apache] Port 80 in use by "Unable to open process" with PID 4! 
155 [Apache] Apache WILL NOT start without the configured ports free! z| 
1 se [Apache] You need to uninstall/disable/reconfigure the blocking application | 
31 2 [Apache] or reconfigure Apache and the Control Panel to listen on a different port 
31 va [main] Starting Check-Timer 
155 [main] Control Panel Ready - 
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pae 


After opening the file httpd.conf, notepad window appears as 


follows: 


Notice that the line referred to in the following figure determines 
the port number, a port 80. 


"]| httpd.conf - Notepad l-le j 


File Edit Format View Help 


^ 


Listen: Allows you to bind Apache to specific IP addre 
ports, instead of the default. See also the «virtualHc. 
directive. 


Change this to Listen on specific IP addresses as shov 
prevent Apache from glomming onto all bound IP address 


OSE Fe SE SR SE SR SR i 


Dynamic Shared Object (DSO) Support 


# 

# To be able to use the functionality of a module which 
# have to place corresponding LoadModule' lines at this 
# directives contained in it are actually available _bef 
# Statically compiled modules (those listed by httpd -1 
# to be loaded here. 

# 


< m r 


e Change the number to 81, and save the file After the restart of 
Apache. 
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What do you notice? 


Discuss this with your classmates and your teacher. 


e Ensure that we run Apache in the new Port 81 as follows: 


12:59:31 <= [Apache] 
12:59:31 = [Apache] 
12:59:31 = [main] 

12:59:31 = [main] 

01:10:02 = [Apache] 
01-10.02 <= [Apache] 
01:10:02 = [Apache] 
01-10:02 = [Apache] 
01:10:02 = [Apache] 
01:10:02 = [Apache] 
(01:10:02 = [Apache] 


or reconfigure Apache and the Control Panel to listen on a different port 
Starting Check-Timer 

Control Panel Ready 

Problem detected! 

Port 80 in use by "Unable to open process" with PID 4! 
Apache WILL NOT start without the configured ports free! 
You need to uninstall/disable/reconfigure the blocking appys 
or reconfigure Apache and the Control Panel to listen 
Attempting to start Apache app... 
Status change detected: running 


If you run 
Apache 


Í XAMPP Control Panel v3.2.1 [ Compiled: May 7th 2013 ] — | 5 
XAMPP Control Panel v3.2.1 £ Config 
Modules z 
Service Module PID(s) Port(s) Actions | s netstat | Notstal 
2532 : - = 
Apache 1252 1. 443 Admin Config Logs gii Shell 
Start Admin | [. Config | [ Logs |_| Explorer 
Admin Config Logs © Services 
Admin Config Logs © Help 
Start Admin Config Logs E Quit 
You need to uninstall/disable/reconfigure the blocking application ^ 
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You must specify the new port 81 program through the 
Internet browser XAMPP. 


http://localhost:81/XAMPP/ 


As follows: 


(c €) mnm] 
i S; te$ 


- D - C |E]awe ses <] 


nglish / Deutsch ; Francais ; Nederlands ; Polski ; Italiano / 
prwegian / Español ; = 


/ 
ol ; =X, Portugués (Brasil) ; 5+5 


APACHE 
FRIENDS. 
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Unit 2 


Requirements and production stages 
of the project 


By the end of the unit, it is expected that students will 


be able to: 

1- Suggest simple projects to employ the applications and 
information and communication technology services in the 
fields of study and life. 

2- Employ information and communication technology 
applications in exchange projects' tasks. 

3- Employ some of desktop programs and applications 
(Worksheets — Data Bases..) in producing specific tasks 
within educational projects. 

4- Employ several programs to solve educational and life 


problems. 
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5- Design suitable database for his project. 

6- Practice PHP programming skills. 

7- Use some of Internet applications in the implementation of 
his project. 

8- Design interactive Web pages for his project. 

9- Link the interactive Web pages with databases. 

10- Produce a project using advanced Internet applications. 

11- Employ advanced databases (MySQL) in designing web 
sites to solve life problem. 

12- Use PHP programming language in producing software 
and web site to express his/her thoughts. 

13- Evaluate web sites and information resources in terms of 


accuracy and credibility in the light of specific criteria. 
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Under the supervision of your teacher, cooperate with your 
group to employ what you learned from the graphics and image 
. processing software in making plans to site pages . 


Proposal, such as 


e Asite for tourism in Egypt 
e Asite for the history of Egypt 


e Asite for the safe use of the Internet. 


Display the scheme to colleagues using programs presentations 
and multimedia: 


e Determine pages of the site and the purpose of each page. 


e Determines the pages that appear with all pages of the site. 


Discuss 
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The proposed scheme with your teacher and with the rest of the 
groups. 
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£3" (2) 


Title: "Design scheme site for "Illustrated terms Dictionary site 


| Under the supervision of your teacher and your cooperation i 
i with your group, employ what you learned from the graphics and i 
. image processing software in making plans to project pages. | 


Display the scheme to colleagues by using programs presentations 


and multimedia: 


e Determine pages of the site and the purpose of each page. 
e Determine the pages that appear with all pages of the site. 


| Discuss the proposed scheme with your 
teacher. 
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è 3 Practice (3) | 
ta 


Title: "The basic concepts of databases" 


i Consider the following table of student data: E 


[Student name [Gender] Governorate | Birth aate | Tel No 
[monamea | ware | caio | 1/1/2000 | 2468 
[sama [romae] ciza | 3/1099 | 87887 
[rama  |romae| caro | 3/42002 | 32323 
rouse p mae | ciza _[unisraoor | 54545 
[hea reme | srana | 617/1908 | 65656 


Discuss the following with your classmates and your teacher: 
-Records and fields: 


Fields Records 


-The characteristics of each field, in terms of : 


Field Size Field Type Field Name 
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Notice: Can student's name, the name of the governorate, date of birth 


... etc be repeated? 


Student name Type of student governorate Date of birth telephone 
repeated Not repeated Not repeated Not repeated Not repeated Not 
repeated repeated repeated repeated repeated 
= Which fields in the table fits to be a primary key field......... ? 


= Say why you choose this. 


EE 


- How can you add a new field that serves as the table's primary key? 


EE 


Type your suggestions 
Discuss them with 
your teacher and classmate. 
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Practice (4) 


Title: "One To One relationship between two tables" 


primary key field 


primary key field 


Table 'student status" Table 'student' 


Status | School | Grade No Phone | Address | Nationality Name No 
Date of Birth 
year 
passed | 2016 2/1 3 11212 Cairo | Egyptian | 1—1-200 Hani 1 
passed | 2016 | 2/3 4 54633 Giza | Egyptian | 2-2-2001 | Amal 2 
passed | 2016 | 2/5 1 99877 Qena | Egyptian | 3-3-2002 | Walid 3 
failed | 2016 2/6 2 55889 | Aswan | Egyptian | 4-4-2003 | Samar 4 


QD 
Study the scheme, and then follow the following procedures: 


— Describe the relationship between the two tables. 


— Select the linking fields to both tables. ............... 
- The two linking fields are identical in terms of ......... ET 
- The relationship between the two tables-one to one relationship with 
examples of records of both tables: 


Discuss your explanation with your teacher and classmates: 
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, Practice (5) 


Title: "The relationship of One To One between two tables" 


A foreign field FK Non-replicable 
PK primary key field 


PK primary key field 


class table (Teacher agenda) 


Class leader | Class | Class code Phone | Address Name Teacher 


code code 


Study the scheme and follow the following procedures: 
e Describe the relationship between the two tables 


Discuss the following with your teacher and classmates: 
e There is a field of the first table is linked to the first field of the second 


one, Identify them ........................ Gein iismemeetdecenes 
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Title: "Concluding one to-many relationship between two tables." 


A foreign field FK 


Grade table 


PK primary key field 


student table 


Grade place | Grade Name | Grade No 
1* floor one 101 
2" floor two 201 
3" floor three 301 


Grade No | Branch | School year | Pupil No 
101 scientific 2016 3 
301 scientific 2016 4 
101 | literary 2016 1 
201 | scientif 2016 2 

ic 
201 | literary 2016 5 
301 scientific 2016 7 
301 "e 2016 9 
101 | literary 2016 10 
101 | literary 2016 12 


Study the scheme, and then follow the instructions: 


e Describe the relationship between two tables: 


PK primary key field 
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Discuss the following with your teacher and classmates: 
e Select the name of the table "one" ............... , the name of the 


table 'Many'................... 


e There is a field of the first table that is linked to a field of the second 


one, identify the two fields: 


e Select the number of students in grades 1-2. 
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Practice (7) 


Title: "Concluding many to many relationship between two tables" 


PK 
primary 


Teacher table Grade table 


Grade Grade 


Teacher 


Specialization ae Teacher No kev field Grade No 
place name 

computer | Ahmad 3 1* floor one 101 

English | Mona 4 2" floor two 201 

Arabic | Amal 1 3" floor three 301 
maths | Omar 2 
art | Hanaa 5 
Pysical Shereen 6 

educational 
Linking table/ 
Grade No and teacher No 
rows 
Teacher No Grade No 


Together as the primary 
key in the linking table 


Study the diagram, and then follow the following procedures 
e Describe the relationship between the two tables. 


Discuss the following with your teacher and classmates: 
e Fill the linking table with a model of some records. 
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characteristics: 


its content: 


data table with the name terms contains (5) 


| the database name: dbdictionary 
i five fields are (ID — Term — Terms — Defe — Picture) 


"dbdictionary" database: 


(1) Run XAMPP program and then run your program Apache and MySQL 


guided by the Ent screen: 


This activity helps you create a database with the following 


Under the supervision of teacher do the following steps to create 


XAMPP Control Panel v3.2.1 


Module 
Apache 
MySQL 


FileZilla 


PID(s) Port(s) Actions 
1720 
3768 80. 443 


2260 3306 


LSun 


| Stop 
| Stop 


Stan 


[Stan 


Enabling autostart for module "MySQL" 


Stasting Check-Timer 
Control Panel Ready 


e] Autostart active: starting 
e Attempting to start — app 


Autostart active. startin 
Attempting to start SaL app 


e] Status change detected ow 


[mysql] 


(2) Type the following address: http://localhost/phpmyadmin/ available 


on your Internet browser's address bar. 


j Databases L) SQL Ñ Status 
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E Sener 127001 


Status change detected: running 


RL-Orindex kphp?dbz à 


a Users ig Export i) Import j^ 


0c9b1d1595ed6443c6506376 D | 9) 


| Replication o. Variables Y More 


? | 
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(3) Select "Databases" tab at the top of the previous screen, and then 


select the language of the application interface that you prefer in the 
"Appearance Setting" part, then click the "NEW" referred to the top 


left of the screen to have the following screen: 


MM (Sener 127.001 


phpMyAdmin 

$895€ Dd l| SQL & Status ^ 

Recent Favorites 
ġ New 


bon Databases 


3... cdcol 


Xport. 5} Import j^ Settings | Replication <, Variables Y More 


2- Type new 
database 


create to -Y 


establish a new 
Click database 


L 9 information schema ù Create database © 


| 
pms [tase ane 


| performance schema 


Collation 


Lj phpmyadmin 


term 


Pa test 


b. webauth 
1-Previously 
established 

database 


i a» Check Privileges 


Che 


ck Privileges 


bin a: Check Privileges 


The previous databases names created appear. 


After typing the database name to be created, for phpMyAdmin 


example "dbdictionary" and by clicking the $8 s oae 
Recent Favorites 
"Create" button, the new database is created. E - join 


2. dbdictionary 
Notice: 4... information schema 


The database that has been created within the 


previous databases appears as follows. 
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(4) On clicking  "dbdictionary", the following screen appears. 
(describe the components discussed with your colleagues and your 


teacher). 
phpMyAdmin W Structure || SQL 4 Search Query 4 Export =} Import g Operations Y More 
x posue 
Salis Go) No tables found in database 
Recent Favorites 7 
ype table - 

mè New #JCreate tabl 2- ROW NUMBER 
a cdcol 
id dbdictionary Name If Number of columns: |4 
2. employees 
Pg informati Database 
‘ia mysql name 3-clich the button to create the table Go 


Make sure you choose "Structure" tab, under the "Create table" 
type a table name, for example "Terms", then enter the number of table 
fields in the "Number of Columns" Let (5), and finally click on the "Go" 


button to show the following window: 


Field 
data type 


Field 
length 


* Privileges Operations V More 
Table name 
Structure i 

Name Length/Values i Collation Attributes Null Index 

id INT 11 None vj v w L| PRIM. 

term VARCHAR v] 500 None v utf8 croatian ci |v} MIE Ud 

trans VARCHAR v] 500 None v utf8 croatian ci |v | tv] 

defe VARCHAR iv] T500 None v]!  utf8 croatian ci [v] [v] 

picture VARCHAR iv] 300f 
Table comments: Storage to be able to type in Arabic inside 

innoDé the field, select run system 

PARTITION definition: i 


To save 
the table 
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From the previous screen. 


Notice: 

— The spreadsheet consists of Fields. 
Each field must have a name, which must be entered under the 'Name', and 
data type which must be determined under the "Type', and the size or length 
which is the required value to be entered under the "Length Values'. To type 
in Arabic inside the field, you should select the type of encryption down 


"Collation". 
-In ID field we select "Primary" from drop-down menu below the Index 


to make it a primary key. 


-Click the "Save" button to save the spreadsheet under the name of "Terms." 


(5) After clicking the "Save" button, the following screen appears: 


. Search  3« Insert «à Export 4} Import =a" Privileges Operations V More 


Rows | Type Collation Size Overhead 
[] terms wi Browse jf Structure œ Search J Insert igi Empty @ Drop InnoDB !atin1 swedish ci 16 KiB 
1 table Sum 0 InnoDB latin1 swedish ci 16 KiB 0B 


With selected 


2-number of 
number o Type the name of the 


Name Number of columns: | 4 The table is established 


In this screen we find the table that has been saved with the name 
"Terms", and the number of tables in the current database. 


In the same way and under the supervision your teacher, create 
other tables in the database, depending on your needs. 
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(6) Review Structure data 'dbdictionary' database table as follows: 


Choose the data table named "Terms', and then click the 


"Structure" button, as shown in the following screen: 


The names and characteristics of 


the fields in a table "Terms" III) 
s&target O ~ © || 12, localhost8080 / 127001 / ... 
TEES 127.0.0.1 » Database: dbcactonary » B Tabie terms ^ A 
Name of Browse » Structure |J SQL \ Search  3* insert «+ Export . import Y More 
database 4 Name Type Collation Attributes Null Default Extra Action 
1 id int(11) No None AUTO INCREMENT gy? Change @ Drop w More 
È 2 term  varchar(500) utf8 croatian ci No None & Change @ Drop w More 
dbdictionary : & 
3 trans  varchar(500) utf8 croatian ci No None J Change @ Drop v More 
|} New = - 
$ p terms 4 defe varchar(5000) utf8 croatian ci No None a Change @ Drop w More 
5 picture varchar(300) utf8 croatian ci No None p Change @ Drop v More 
-a employees t Lj) Check All With selected: © Drop P Primary y Unique E] index 


information schema 


i mysql & Print view E Relation view gu Propose ® Track table > Move columns 
| 
T aga eee ln }<cAdd 1 column(s) © At End of Table At Beginning of Table After id v 
+ phpmyadmin isis aiiis To create a 
i-i test zu new field 
* webauth Information 
Space usage Row statistics 

Data 16 KiB Format 

Index 0B Collation latinl swedish ci 

Total 16 KiB Next autoindex 

Creation May 12, 2015 at 12:10 AM 
C] 


Study the previous screen. What do you notice? Discuss 


e | jua. http://localhost:8080/phpmy 


After studying the previous screen, we 
Tp uU phpMyAdmin 
notice the following: 48s$s95e 


Recent Favorites 


e The name of the database "data | m =“ 
i’ cdcol 


imu. dbdictionary 
dictionary". J New 


*- terms 


| 
* y users 


with your teacher and classmates , 


e Data table named "Terms". 
+ =: employees 


*.. . information schema 
+ . mysql 
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e Data table 'Terms" contains (5) five fields, showing their names, types 


and sizes. 


e The 'ID' field as a primary key field is set. 


| | _| Browse » Structure lj SQL 4 Search #< insert l Export =; Import ` 
| | # Name Type Collation Attributes Null Default Extra Action 

| e 1 id int(11) No None AUTO INCREMENT s” Change 
| [] 2 term varchar(500)  utí8 croatian ci No None a” Change 
| C] 3 trans  varchar(500) utf8 croatian ci No None oo Change 
| | [] 4 defe varchar(5000) utf8 croatian ci No None a” Change 
| [] 5 picture varchar(300)  utf8 croatian ci No None & Change 
| | TE Check All With%elected: [©] Browse S? Change © Drop 4p Primary y Unique 


&3 Print view 


dà Propose table structure @ * Track table ib Move columns 


«8 Relation vie 


| X-Add |1 column(s) (At End of Table © At Beginning of Table (C) After | id iv Go | 

| | + Indexes | 
| 

I M 

I Information | 

| £————————— 

| Space usage Row statistics 

| Data 16 KiB Format Compact 

| Index o B Collation latini swedish ci 

| A x 

| Total 16 KIB Next autoindex 10 


Creation May 12, 2015 at 12:10 AM 


e You may select the field and control the characteristics of the 
group through the buttons down the last field. 
e You can also add a new field to locate and add it in the active 


| table. 
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Timm 


By following these steps: 


e Select spreadsheet data entry "Terms", then Click "Insert" tab, and 


[— fT Server: 127.0.0.1 » @ Database: dbdictionary » Eos EI 


| Browse ¥ Structure |] SQL & Search  X* Insert 


Column Type Function 


id int(11) vi 


«+ Export = Import 
Null Value 


varchar(500) 


= Privileges 


enter data in each field down the ue a 


J^ Operations v More 


trans — varchar(500) vi 


defe 


varchar(5000) 


varchar(300) 


picture 


| Ignore 


Column Type Function Null Value 


id int(11) 


term — varchar(500) v] 


trans — varchar(500) vl 


defe — varchar(5000) 


picture  varchar(300) 


Insert as new row (Mj and then Go back to previougfia 
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Select the Insert tab 


. data entry below Value 


for each field. 
Click "Go" after inserting 
data. 


Jnit 2: Requirements and production stages of the project a 
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The same way, you can enter data in any table of the database tables 


using the application of MySQL. 
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Unit 3 


Creating Site Pages 


"Illustrated Dictionary of computer terms". 


By the end of the unit students are expected to: 


A 


(1) 


(2) 


(3) 


(4) 


(5) 
(6) 


(7) 


(8) 
(9) 


Employ some of the e-learning tools in the production of his 
project. 

Employ information and communication technology 
applications in the construction of educational content. 

Employ one of applications of creating website in linking Web 
site pages. 

Employ appropriate applications in the treatment of 
multimedia elements (voice - video-image.... ) 

Practice as HTML and PHP and its applications in web design. 
Precise dealing with electronic information skills (identify - 
Evaluation - criticism — organization) 

Employ electronic information sources associated with a 
specific project in the implementation of the project. 

Learn some of the transactions related to the language of PHP. 
Learn some of the concepts and formulas related to the IF and 


Switch statement. 
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Required: "Create a Web page (test1.html) using HTML code' 


I —Ó——————————————— ——————————MÁ——Ó: 


Through this activity, you can use HTML code to create the Web as the 


"Test1' page and its characteristics: 


e Internet browser page title "My First Web Page". 

e The phrase "sil ji sS" appears in the first line of the Internet 
browser screen. 

e In the second line: Egyptian flag image is in the middle of the 
screen. 

e Inthe third line, the words: "+. bai" are large scale in the middle 
of the screen as well. 

e Inthe fourth line the words: "sül aiall" are on the right of the 
browser screen. 

To do so, follow these steps under the supervision of your teacher 


Implementation Steps: 
(1) Load the text editor Notepad program. 


(2) Type the following code: 


. My First web Page 
</Title> 
> 


<img src = "Egypt.jpg'- 
<H1I> „a ka </hi> 


</p> 
kp align = "“right"> äl à»&2J </p> 
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(3) Save the file with the name and extension "Test 1. Html' on desktop and 


select "UTF-8" from "Encoding" to display Arabic texts correctly on the 
browser. 


As follows: 


(€) ~ T E Desktop vė Search Desktop p 


Organize v New folder 


A 
"X Favorites * Ubraies 
BE Desktop l^ System Folder 


d» Downloads 


=| Recent places User 
System Folde 


i Libraries 
@& Apps 
*| Documents 


2 Music 


EX! System Folder 


Select the 


Apps 
Shortcut 
puter 1.76 KB 


encoding bdallah mansour (C:) 


v JE. 13-28-2015 Translation ist Sec v 


Cancel 


a Hide Folders 


(4) Open the file 'Test].html' from the desktop to know the result of the 
execution of the code in the Internet browser screen and the following 


appears: 


Fe ùk Yew Fovertes los Heb 


x) 2) $$ po onch Ve tacts E 


©) C'pocuments and Seri ahmediDesiboglo Mian cai Testi how 


Lu m 
ud aed 
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(5) You can review the HTML code to make any modifications, by 


pressing Right Click button on the internet browser screen and selecting 


the command "View Source" from the shortcut menu, as follows: 


x) (2 € j^ seh yrs £A 


E) C Cocuments ré Serge deed Deditzp o Tae Det] hem 


(6) After saving the changes in the HTML code, reactivate the internet 
browser screen, then press the F5 key to see the result of modifications 


to the web page. 
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Required: Create a web page with the name 'Test2' which displays the 


! 
| 
| 
| 
| 
| 


_ following: 

e Internet browser page title is "My Second web Page". 

e The phrase "ial all cla ol ja leao" is in the first line of the 
Internet browser screen. 

e |n the second line: place the "Egyptian flag image" next to the 


phrase "Ay! 4aauall" in the right of the browser screen following 
dimensions "50 x 100". 


Implementation Steps: 
Dear student, with the help of the skills you gained in the previous 
activity, create a second Web page by following these steps: 
(1) Open the text editor that you will use to type HTML code which is 


(2) 


My Second web Page 
</Title> 
</Head> 


<Body> 
ciel all elè ol as lakso] 
<p align = 'Right" » 
<img src = "Egypt.jpg" 
height=50 width=100> 
wel äi </p> 
</Body> 


</HTML> 
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(3 Type the code. 


(4) Save the file with a name and the extension "Test2.html" on the 


desktop. 


(5) Select "UTF-8" from "Encoding" below the "Save As" window. 


(69 Open the file on the desktop and evaluate the result of the 


implementation of the code in the Internet browser screen: 


?) My Second Web Page - Mozilla Firefox 
File Edit Wew History Bookmarks Tools Help 
| |_| My Second Web Page [+ 


é } 11 file:{{!C:Documents and Settings/ahmed/Desktop/ 2/sa.0x wasfTest2,ht ^ > C 
WP. | 


oal il lo o] yuna Lal 
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reating Site Pages 


Practice: Complete the following table: 


Then type the purpose of the code which was typed: 


Code 


Purpose 


«Title» 
My Second Web Page 


</Title> 


<Body> 


Quia abil eL Cy) puma | glial 


<p align = "center"> 


Code explanation: 


- The beginning of the tag <P>: 
a new paragraph, 


- align = "Center" feature means 
the alignment of the following text on 
the screen browser is Center. 


<img src = 
"Egypt.jpg" 
height - "50" 
width = "100"» 


— Explain the code? 


- Complete: What is the format of the 
image alignment? 


E 


Computer & Information and Communication Technology 
Second year secondary 


d 


= 


Required: Modify what is necessary in web the two pages 'Test1.html" and | 
"Test2.html' by modifying HTML code. 
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e On clicking the text " the second page" ,you move to web page 


"Test2.html" from The "test1.html" 


e The possibility of a return to "Test1.html" if you click the Egyptian 
flag image below the browser screen for the "Test2.html". Page 


e Activity steps: 


(1) Modify the code in the 'Test1.html' as follows: 


: My First web Page 
«/Title» 


"Center" 


"Egypt.jpg"» 
/H1» 


“right"> 
= "test2.html'» dail deol </a> 


Notice what will happen. 
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The text, to be made as a hyperlink, was put between the beginning and 


the end of the following code: 


«a href = 'test2.html' > next page </a> 


<Title> 
My second web Page 
-/Title- 
</Head> 


<Body> 
vuol abl cla ul as Iglss] 
<p oa = "Right"- 
<a href = “Testi1.html"> 


<img src = JESYPtidB9" 
Hetight=50 width=100> </a> 
weil dall </p> 


</Body> 
</HTML> 


What do you notice? 
-The image code, intended to be made a hyperlink, was inserted 


between the beginning and end of the 'Tag' as follows: 
«a href = "'Test] .htm'> 
<img src = 'Egypt.jpg' Height=50 Width=100> 


< a> 
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@ My Second Web Page - Microsoft Internet Explorer 


File Edit View Favorites Tools Help 
Qe * & |x] E A p- Search Sf Favorites g "a 


Address €) C:\Documents and Settings\ahmed\Desktop\ 1A casYiTest2.htm 


&] File: fC: /Documents%20and%20S5ettings/ahmed/Desktop/ ST «9/53 18.45 Y + Yonas] X My Computer 


(3) Save the modifications in the two files Test] .html 'and' Test2.html 
(4) Open the 'Test].html' from the desktop and notice the result of the 
implementation of the code in the Internet browser screen. 


(5) Click the hyperlink "second page', what happens? take notes: 


(6) Once you click the hyperlink, you move 'Test2.htm!' page which 
appears in the browser screen. 
(7) From the second web page 'Test2.html' try to return to the first page 


"Test1.html'" by clicking the hyperlink "Egyptian flag image". 
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"Test2.html' through the application of Expression Web or modification in 


Í Required: Modify what is required in web pages 'Test].html!' and 


.the HTML code so: ; 


e When you click the "sùil 4.2 call" on page browser screen, you can 
move to web page "Test2.html'. 

e You can return to the first page "Test1.html' if you click Egyptian 
flag image of the browser screen for the page 'Test2.html'. 


Under the supervision of your teacher, follow the next instructions: 


(1) Load the program "Expression Web'. 

(2) Open "Test1.html' and 'Test2.html' web pages, through the 
File menu, and then select Open, and select the file name 
"lTest].html', and repeat the above for the second file 


"Testo.html."' 


7 
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© ~ T Jd « ANSARYI (F) » 25 > 


Organize v New folder 
^ Name 
J Libraries 
*| Documents 
a Music 
i| Pictures 
Bl Videos 


È Shortcut to vbscy 


wj Homegroup 


S xampp-win32-5.6.3-0-VC11-installer of 
E Jo Vl ull Laal gill WWI casali s. 4/1/2 
KÈ Jol uwha Loall si ull aol 

Q^ Jol pulpal! Lail sgil lil eral 

i) S 2 Wis 


Vi X 


jV Computer 
i, 05 (C) 
cx RECOVERY (E:) 
em ANSARY! (F:) 


File name: | Test v, All Files 


Tools ~ [ Open Iv Cancel 


(3) Notice that the name of web pages is displayed on the screen 
of the program as follows: 


File Edit View Insert Format Tools Table Site DataView  TaskPanes Window Help 


D- dna BA-F7 ABBY 9-¢- She ao T- Gnr + DDE 
A) Paragraph > (Default Font) = (Default Size) ~BIY ESRB AK EERE O-Y- Ao nered g 


zi ia FESE {Show Lay Ia tid g 
Folder List ajax lm || resti.htm* (Testzhtm* 


= = x || Toolbox 
p. C:\Users\ansaryNew Documents ^ |f] [<body>] «p». ; 
& Butterfly Feh.jpo m 
= buttoniC.ipg LD 5 ppc! o» 
IE XE 
d 


$e. button 1D. jpg 
ie button1É. jpg 


Lj C.det 

(à defoutt.htn 

s] hopes.htm 

1€) personal data.htm 
9) qualficatin.htm 
FA NES UE 


AJ, Attach Style Sheet. 


Select CSS style to apply: 


Clear Styles 


yfad) v 


Visual Aids On Style Application: Auto 4.22 KB Quirks 591x377 IE6 CSS2.1 


Consider the previous screen and notice the following: 
a. Web pages 'Test1.html" and "Test2.html" names are displayed. 


ijj Web Site | Testt.htm* \\Test2hhtm® N x 


r 
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b. The page that we have created through markup language HTML code 


appears as if it were in the browser screen, which we have referred 
to previously in the property (WYSIWYG), we can make any format or 
impact or add any type of information in the page by typing and 
inserting as easily as if we were to deal with any word processing 


program, which appears in the toolbars. 


File Edit View Insert Format Tools Table Site DataView TaskPanes Window Help 
Ds HAM AS-F¥) 4 BBEI9-*- BOE 8 20/T-Ourn» « i 
A) Paragraph ~ (Default Font) v (Default Size) -BIU IMS =a A A jE i= #é 


TF Sl Jai ‘Tool Td Hid E 


c. Try to click the following three buttons: - Code- Split-Design 


[Eaesion| E spit E Code 


Write down your notes: .........cccece eee e eee eee eee eee eeeeeeeeeenaeneeneeeae 


Discuss this with your classmates and your teacher. 


[Fabesion| E spit code 


- Design - The Design displays the web page, as it 


appears in the internet browser screen, and 
every part of the web page in the Design screen 
is determined by "Select" whose html code 


appears in the code screen. 


- Code — Markup language HTML code displays all the 


Web page components that were displayed. 


- Split — The screen is divided into two parts; Web 


page appears in the first part, where HTML code 


appears in its other part. 
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——— Á———————— .-- ——— 1 : 


(4) Activate first web page 'Testl1.html', then click the Split button to 
show Web pages and HTML code. 

(5) To make a hyperlink to the phrase "second page', you need to: 
e Select "isil iaai" , and then select 'Hyperlink' from "Insert" 


menu to show the following window: 


Link to: Text to display: auld! zial ScreenTip... 


1. Look in: BE C:\Users\ansaryNew Documents My Web Sites| Y E] @ Ba 
or 


©) F:\2 &\Testi.htm (open) 
ara P F:\2 c\Test2.htm (open) 
&-| Butterfly Fish.jpg 
(=| buttoniCjpg 
Browsed |©] button1D.jpg 
Pages || button1E.jpa 
CV.dwt 


į |) defaulthtm 
| hopes.htm 
© | personal data.htm 


Address: Test2.htm 


Recen 
Files 


e Select the page name "Test2.html" then click "OK" button 
(6) This phrase "sùl 43a 4l becomes a Hyperlink where it appears in a 
distinctive color, and underlined, and when you select a 
hyperlinked word "4u\4!) iaaii" in the Design window , HTML code is 


highlighted in the Code window as follows: 
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Ele [dt Wew jnset Format Tools Table Site DataView TaskPanes Window Help 
JG dha 82-7 BI 9-0 Jil & 30 f étv** 334 
Aj Paragraph > (Default Font) ~ (Defauit Sce) B ig E zau A a EEE H:97-AÀ- LEE * 3 H 


dg 


p C Userstansar Nen Documents ^ |f; 
ie. Butterfy Fh. po 
i. button iC. pg 
i». buttoniD.pg 
ie. button JE. jpg 
| Chaat 
Q delsdthta 
.$] hopes hte 
8) nersonal, data hte 
9] quskfcaton hts 
"- a, Me alas 


A} Attach Style Sheet, 


Select CSS style to apply: 


Visual Aide Om Style Application: Auto 435KB Quirks 591x206 IES CSS21 


(7) The same way we can make the Egyptian flag Hyperlink by activating 
the second web page 'Test2.html', making sure to click the Split 
button. 

| (8) Click Egyptian flag image to select it, and then select from "Insert 


menu "Hyperlink" command to display the following window: 


pic 
(@ Shortcut to himi Hanan 1 
1 


i ECD htmi 
Test Lhimi 
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e Select the page name 'Test1.html" then click "OK" button. 


(9) This image of the "Egyptian flag image" becomes a hyperlink where the 
mouse pointer changes on pointing it, and when you select a hyperlink — 
flag image - in the Design window, HTML code is highlighted in 


the Code window as follows: 


r x 
: File Edit View Insert Format Tools Table Site DataView TaskPanes Window Help Type a question for help - 
:i-gg-ld dà à i, - V X Ba 1 jmfdg&aoT7T-e--"»e«uar 
Í A) Paragraph ~ (Default Font) + (Default Size) - BID =S Ac SESS O-Y- Av amwe « 2 z 
$A Gh ety SS | Gad Gad EFES EE] - Z| Et show Layout Tool. Td TA 
Folder List Toolbox Dx 
>|) HTML ^ 
E Butterfly Fish.jpg E Tags 
= : 13 «/style» 
| button 1C.jpg 14 </Head> 25} <div> 
=) button 1D.jpg 15 [€] <span> 
| button 1E.jpg 16 <Body> = Break 
|_| CV.dwt 17 «div class-"style2"5 ; 
G3 defauit.htm 18 «strong»giia| & «l3 ol paa Io] = Horizontal Line 
S] hapes.him 19 </strong></div> {a Image 
npe 20 <p align = "Right"> 3382 Inline Frame 
(9) personal_data.htm 21 <a href="Test1.htm"> a 
9] qualification.htm 22 <img src = "Egypt.jpg" Height-50 Width-100 class-"stylel"»c/s» Player 
m ue rt 23 wis¥l aiai </p> «[ Paragraph v 
S > 24 </Body> — 
Apply Styles Bx 
(ial al) eL Cj] paa | gla} ApplyStyles ‘Manage Styles\ X 
Al |g — 
E 24 E a img.stylei ^A New Style... | Options Y s 
<img.style1> AX Attach Style Sheet... 
a Pr P Q 
E Attributes E 
ei class  stylei = IAPS iai dll Select CSS style to apply: 
ef height 50 Clear Styles 
H src —— Egyptjpg 
oH width 100 =] Current Page | 


(Af acces... 
e align 


(9).stylel 


—E v ||Gdesion ElSpiit El Code 
Test1.htm Visual Aids: On Style Application: Auto 441KB Quirks 591x186 IE6 CSS2.1 


(10) To test the hyperlink and navigate to "Test2.html' page, Click the 
hyperlink "4:6! 442 all" while still holding the Ctrl key on the keyboard, 


then move to the second page 'Test2.html' that becomes active. 


(11) And also you can return to the 'Test].html' page, click the hyperlink 
"Egyptian flag image' and hold the Ctrl key on the keyboard, and then 


move to the first page "Test] .html" that becomes active. 
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we se 
T 


[ 
l 


N 


Required: Create a new site by applying Expression Web | 


Implement the following steps under 


x eK cweset-o — the supervision of teacher: 
ecent Sites > 
Close * 
e Open "Expression web program" 
Publishing 
Publishing Settings... è cli k "Si " f ll : 
= Publish Current File... Ctrl-- Shift-- U IC ite menu as O OWS: 
- Publish Changed Files... Ctrl+Shift+H 
Publish All Files... Ctrl-- Shift-- A e Select "New Site" command. 
Delete... 
eee EE e Make sure you receive the following 
mport > 
Manage Sites List... window on your computer screen. 


Site Settings... 


= = 
New a) 
‘Site | 
G al a One Page Site Description 
Empty Site Create a new site with nothing in it. 
Templates c Import Site Wizard 
Options - 
[E] Add to current site 
Use Encrypted Connection (SSL) 
Specify the name and location of the new site 
Location: E YXampp'htdocsdictionary[ = Browse... 
[v] Add to Managed List Name: [dictionary 
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Study the screen and discuss your teacher and classmates. 


e From the New Site window, select "Empty Site" 
e Inthe /ocation box, type site path "C:\xampp\htdocs" 
e Inthe name box type the site name "dictionary". 


By typing the site" 
Dictionary", you make a folder 


in the path. 
C:\xampp\htdocs 


N 
New E 
Ste | 
| | [E] one Page site Description 
General | ~ i 
| | d Empty Site Create a new site with nothing in it. 
Templates dq Import Site Wizard 
Options 
] Add to current site 
L | Use Encrypted Connection (SSI 
Specify the snd location of the new site 
Location: | C:\xampp\htdocs\dictionary| X | Browse... } 
[V] Add Name: [dictionary 
C) Core 


e Save the site making sure of its name and location. 


e Try track the path and be sure the site saved within 


the htdocs folder. 


e Site folder appears as in the following figure in the browser 


window "Windows Explorer": 


D Computer 
EL Abdallah Manscur (C:) 
4 SAVG 
gh. 7539007332585fdc4e4d822f9f882 


de AdwCleaner 
a d9978869e59060711b64 
de Downloads 
de MSOCache 
d PerfLogs 
de Program Files 
4e ProgramData 
4e Swsetup 
4s SWTOOLS 
de Users 
de Windows 
Je xampp 

ce Local Disk (D:) 


Se Network 


k 17 tems 


are with ~ Burn New folder 


de dashboard 


"d »spache pb2 ani.gf 
©) spplications.html! 
AJ banemicss 
favicon.ico 

©) ndexhtmi 

EÍ endex php 


Dictionary 


folder 


= Em] 
P 
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& | Activity (6 


Title: "Creating Header.php page in the design screen." 


Required: Under the supervision of teacher, Create Page Header.PHP | 
using the program 'Expression Web'. ; 
/ eA suitable image appears at the beginning of the site pages. — 
e The basic texts that are linked to pages on the site to help the 
site handler to wander around it. 


Implementation Steps. 
(1) Load "Expression Web". 


(2) Select the display style of Split. 

(3) Insert image Banner, and you can use your previous experience 
in dealing with a photo editing application to edit the image as 
desired. 

(4) Type the following texts below the image: 

Bae Line « llaa Jute c Glaus ciis « (luna oe dan: glaas AU] Aruni 


/ 
da 
| unicpatio TET 


c 


sacle pla iila iu J 
t duty 
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Required: Under the supervision of teacher, use 'Expression 
Web" program to create connections between texts down image 


Banner pages and their respective location. 


I 
l 
i 
i 
i 
i 
i 
i 
i 
i 
i 
\ 


Steps to implement activity: 


Firstly, 
Open "Header.php'" page through Expression Web program and 


study the following code with your classmates and your teacher: 


<html dir="rtl"> 
<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
</head> 
<body> 
<div> 
<img height='161' src—'images/banner.jpg' width='1267' > 
</div> 


WA UA 4 UL ke 


<div style="width: 1256px;text-align:right" > &nbsp: 
<a href-"index.php' Asi </a> 
&nbsp;&nbsp:&nbsp:&nbsp;&nbsp;&nbsp; 


uj de e 


<a href="add_term.php">&nbsp;@ibwas 482} 


</a>&nbsp:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: 
<a href-"search term.php">G@lbwas je Gaull</a> 
&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:&nbsp: 

<a href="Del Term.php">@lbwas cài /a-— 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp:;&nbsp: 

<a href-"Edit Term.php' >g Jani 
</a>&nbsp:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp: 
<a href="Help.php">3se tbs </a> 

</div> 


</body> 
5 </html> 
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Secondly, 


the previous code can be done in the Design style as follows: 


| ]- OPEN the page header.php through the usage application, select the 
| 
| desired text for which we implement a hyperlink "às, from 


context menu, select "Hyperlink ", as follows: 


<span> 
om Break 
[— Horizontal Line 
E Image 
f* Inline Frame 
r Layer 


«T Paragraph 


~ Form Controls 


xo pi ALS $5 
: | gő Cut 
Aa Copy 
G4 Paste 


Quick Tag Editor... 

Zä Manage Editable Regions... 
Page Properties... 

A Font.. 


2- Select a linked page index.php as follows: 


Insert Hyperlink 


Text to display: | acad ll ScreenTip... 
Look in: [in Dictionary -| fal =] 
f Tr Del Term.php / ^ Bookmark... 


4) desktop.ini 


[i $ edit_term.php Target Frame... 
li r$ header_links.php 
] Parameters... 


Iz ME (ob Help.php 


Place in This 
Document 

Pages  [uy' index.php 

Er post.php 

Recent [^] reg.php 
EM r-j search term.php 

E$ signin.php < 


Address: [index.php v | 
| | LR m | 


Create New 
Document 


= 
E-mail Address 


3- Make all links according to what is planned for the site. J 
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Activity (8) 


Title: "Create a contact page database" 


Required: Under the supervision of teacher, create a new web page 


<?php 
$username="root"; 
$password=""; 
$database="dbdictionary"; 
$server="localhost"; 


$connect=mysql_connect("$server","Susername",""$password"); 
if (Sconnect) 


i: 00-10 UU à UD Nr 


{ 

$select=mysql_select_db("$database") or die(" SULHI $21 å AIS s clin"): 
} 

else 


{ 
echo("GUall basti ( Jucas y! ai al"); 


Discuss the typed code - which 
previously explained in 
student's Book - with your 


teacher and classmates. 


Save the page as... 


"connection.php" 


2 
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Required: Under the supervision of teacher, Use the following screen to 


enter PHP code in the places indicated to them to create a Web page 


1 that used for inserting a term to database table. 


E i” 


(1) Type PHP code to include Header page 


<?php | 
| include("header.php"); 


jon.php input term terms php* 


Mn aopio4 
X0qj001 


1. Insert PHP code to 
include header.php page 


As deun S Addy 


«div style-"text-align:center" > «hl», Eray 


$9n9doid SS) Sapdo Bey 


D orm-data"» 
| «div class-"style2"» | 
| <br_/> 
| ! 
| &nbsp; &nbsp;&nbsp; 
| 


Add your PHP code to linking the 


database and add the term 


&nbsp; ;&n 

«input name-"trans" t 

<br/> 

Gaps 

&nbsp; &nbsp; anps SD; &nbsp; &nbsp; 

<textarea r extAreal" style="width: 480px; height: 30px"></textarea> <br /» 

sbr /z | 
[SET MIN \| 
&nbsp; &nbsp; | 

| 2 <input name= style="width: 488px" type-"file" l 
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Activity measures: 


(2) Add your PHP code to connect to the database and add a new term data. 


(3) Show page "clhwas AàLza through Internet browser with the address: 


Localhost/dictionary/Add Term.php 


(4) Insert the new term and then press 'Add'. 


Goodbye 
See you in the 


second term 
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